<template>
  <div>
    <div class="content">
        <div class="space"></div>
        <div class="list">
            <ul>
                <li>
                    <img src="../assets/r_icon_1.png">
                    <input v-model="account" type="text" placeholder="请编辑您的账号8-16位数字">
                </li>
                <li>
                    <img src="../assets/r_icon_2.png">
                    <input v-model="phone" type="text" placeholder="请输入您的手机号">
                </li>
                <li>
                    <img src="../assets/r_icon_3.png">
                    <input v-model="code" type="text" placeholder="请输入您的验证码">
                    <p @click="getcode" v-if="show">获取验证码</p>
                    <p v-if="!show">{{timer}}秒</p>
                </li>
                <li>
                    <img src="../assets/r_icon_4.png">
                    <input v-model="password" type="text" placeholder="请输入您的密码">
                </li>
                <button @click="register">注册</button>
            </ul>            
        </div>
    </div>
  </div>
</template>

<script>
import api from "../axios/api"
export default {
data(){
    return{
        show:true,
        timer:60,
        account:null,
        phone:null,
        code:null,
        password:null,
    }
},
methods:{
    getcode(){
        this.show = false;
              var auth_timer = setInterval(()=>{
                this.timer--;
                if(this.timer<=0){
                  this.show= true;
                  clearInterval(auth_timer)
                }
              },1000)
     let data= {
        phone:this.phone
    }
    this.$post(api.code,data).then(res=>{
        if(res.code == 0){
            this.$toast(res.msg)
        }
    })
    },
    register(){
         let data= {
            phone:this.phone,
            account:this.account,
            code:this.code,
            password:this.password,
    }
    this.$post(api.register,data).then(res=>{
        if(res.code == 0){
            this.$toast(res.msg)
            this.$router.push("/")
        }else{
            this.$toast(res.error)
        }
    })
    }
}
}
</script>

<style lang="less" scoped>
.space {
    height: 5px;
    
}
.content {
    background: url("../assets/register.png") no-repeat;
    width: 100%;
    height: 320px;
    background-size: 100%;
}
.list {
    padding-top: 220px;
    width: 85%;
    margin: 0 auto;
    ul{
        display: block;
        width: 100%;
        height: 320px;
        text-align: center;
        background-color: #fff;
        margin: 0 auto;
        padding-top: 20px;
        box-shadow: 2px 2px 15px #ccc;
        border-radius: 15px;
        li{
            display: flex;
            align-items: center;
            width: 90%;
            margin: 0 auto;
            margin-top: 20px;
            height: 40px;
            font-size: 12px;
            color: #7a7a7a;
            background-color: #f5f5f5;
            border-radius: 20px 20px 20px 20px;
            img{
             display: block;
             width: 18px;
             height: 20px;
             margin-left: 20px;
            }
            input{
                border: none;
                margin-left: 10px;
                background-color: #f5f5f5;
            }
            p{
                margin: 0;
                width: 80px;
                height: 30px;
                text-align: center;
                line-height:30px;
                border-radius: 20px;
                color: #fff;
                background-color: #ffa520;
            }
        }
        button {
            width: 90%;
            height: 45px;
            background-color: #ffa520;
            border-radius: 30px;
            color: #fff; 
            border: none;
            margin-top: 10px;
        }
    }
}
</style>